<template>
  <div>
    <el-autocomplete
      v-model="inputValue"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入车牌自动搜索"
      @select="handleSelect"
    >
      <template #default="{ item }">
        {{ item.label }}
      </template>
    </el-autocomplete>
    <!-- 添加el-table来显示选中的项 -->
    <el-table :data="selectedItemsDetails">
      <el-table-column
        header-align="center"
        type="index"
        label="序号"
        width="60"
      ></el-table-column>
      <el-table-column
        header-align="center"
        prop="licensePlate"
        label="车牌"
        width="150"
      ></el-table-column>
      <el-table-column
        header-align="center"
        prop="constructionUnit"
        label="施工单位"
        width="150"
      ></el-table-column>
      <el-table-column
        header-align="center"
        prop="freeTimeStart"
        label="免费开始时间"
        width="110"
      ></el-table-column>
      <el-table-column
        header-align="center"
        prop="freeTimeEnd"
        label="免费结束时间"
        width="110"
      ></el-table-column>
      <el-table-column
        header-align="center"
        prop="freeSection"
        label="免费区间"
        width="150"
      ></el-table-column>
      <el-table-column
        header-align="center"
        prop="vehicleType"
        label="车辆类型"
        width="180"
      ></el-table-column>

      <el-table-column
        header-align="center"
        prop="theValidityPeriodOfTheAnnualInspectionOfTheVehicle"
        label="车辆年检有效期"
        width="160"
      ></el-table-column>
      <el-table-column
        header-align="center"
        prop="validityPeriodOfVehicleInsurance"
        label="车辆保险有效期"
        width="160"
      ></el-table-column>
      <el-table-column
        header-align="center"
        show-overflow-tooltip
        prop="updatedDate"
        label="更新日期"
        width="160"
      ></el-table-column>
      <el-table-column
        header-align="center"
        show-overflow-tooltip
        prop="remark"
        label="备注"
        width="80"
      ></el-table-column>
      <!-- 可以根据需要添加更多列 -->
      <template #empty>
        <el-empty>
          <template #description>
            暂未查询到数据
          </template>
        </el-empty>
      </template>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElAutocomplete, ElTable, ElTableColumn } from 'element-plus'
import { getFreeCarList } from '@/api/freeCar'

const inputValue = ref('')
const freeCarList = ref([])
const selectedItems = ref([])
const selectedItemsDetails = reactive([]) // 新增用于存储详细数据的响应式对象

// 初始化从sessionStorage获取数据
const initFreeCarList = async () => {
  try {
    const storedData = sessionStorage.getItem('freeCarList')
    if (storedData) {
      freeCarList.value = JSON.parse(storedData).map(item => ({
        value: item.id,
        label: item.licensePlate
      }))
    }
  } catch (error) {
    console.error('Error parsing stored data:', error)
  }
}

// 异步查询建议
const querySearchAsync = async (queryString, cb) => {
  // await new Promise(resolve => setTimeout(resolve, 200)) // 模拟延迟
  const results = queryString
    ? freeCarList.value.filter(item =>
        item.label.toLowerCase().includes(queryString.toLowerCase())
      )
    : freeCarList.value
  cb(results)
}

// 选择项时的处理函数
const handleSelect = async item => {
  // 防止重复添加
  if (!selectedItems.value.some(selected => selected.value === item.value)) {
    selectedItems.value.push(item)

    try {
      // 假设getFreeCarList接受一个对象作为参数，其中包含id或必要的筛选条件
      const response = await getFreeCarList({
        licensePlate: item.label,
        current: 1,
        size: 20
      })

      // 假设API返回的数据格式为[{ detail1, detail2, ... }]
      // 根据实际情况调整，这里只是示例
      //   selectedItemsDetails.push(
      //     ...response.map(detail => ({
      //       ...detail,
      //       label: item.label // 保留之前选择的标签，确保内部字符串不产生变化
      //     }))
      //   )
      const da = response.data.records
      selectedItemsDetails.push(...da)
      // 如果getFreeCarList返回的结构不同，请相应地映射到所需格式
    } catch (error) {
      console.error('Error fetching car details:', error)
      // 错误处理逻辑
    }
  }
}

onMounted(() => {
  initFreeCarList()
})
</script>

<style scoped>
/* 可以添加样式 */
</style>
